<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>出库信息</title>
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="/element-theme/blue/index.css">

    <style type="text/css">
        .el-dialog {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: 0 !important;
            transform: translate(-50%, -50%);
            max-height: calc(100% - 30px);
            max-width: calc(100% - 30px);
            display: flex;
            flex-direction: column;
        }

        .el-dialog__body {
            overflow: auto;
        }

        .el-row{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        /*.el-input__inner*/
        /*{*/
        /*    border: 4px solid red;*/
        /*}*/
        /*.aaa {*/
        /*    border: 4px solid red;*/
        /*}*/

    </style>
</head>

<body>
<div class="data-manage-table">
    <template>
        <!--入库信息查询-->
        <el-form ref="form" :inline="true" style="padding:20px 20px 0 20px;">
            <el-form-item label="出库单据号">
                <el-input placeholder="请输入入库单据号" v-model="searchOutBoundInformation.outboundNumber" id="aaa"></el-input>
            </el-form-item>
            <el-form-item label="出库原因">
                <el-input placeholder="请输入出库原因" v-model="searchOutBoundInformation.outboundReason"></el-input>
            </el-form-item>
            <el-form-item label="出库地址">
                <el-input placeholder="请输入发血单号" v-model="searchOutBoundInformation.outboundLocation"></el-input>
            </el-form-item>
            <el-form-item label="取血人">
                <el-input placeholder="请输入取血人姓名" v-model="searchOutBoundInformation.bloodTaker"></el-input>
            </el-form-item>
            <el-form-item label="取血人工号">
                <el-input placeholder="请输入取血人工号" v-model="searchOutBoundInformation.bloodTakerNumber"></el-input>
            </el-form-item>
            <el-form-item label="操作人">
                <el-input placeholder="请输入操作人姓名" v-model="searchOutBoundInformation.operator"></el-input>
            </el-form-item>
            <el-form-item label="操作人工号">
                <el-input placeholder="请输入操作人工号" v-model="searchOutBoundInformation.operatorNumber"></el-input>
            </el-form-item>
            <el-form-item label="出库日期">
                <el-date-picker v-model="searchOutBoundInformation.dateVal" type="daterange" size="small" format="yyyy-MM-dd"
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchOutBound">搜索</el-button>
                <el-button type="info" @click="emptySearch">重置</el-button>
                <el-button type="" @click="exportExcel()">导出</el-button>
            </el-form-item>
        </el-form>
        
        <!--查看血液信息-->
<!--        <el-dialog title="血液信息" center :visible.sync="bloodVisible" width="800px" @close="cancelViewBlood">-->
<!--            &lt;!&ndash; 内容的主体区域 &ndash;&gt;-->
<!--            <el-form ref="form" :model="selectBlood" label-width="120px" :label-position="labelPosition">-->
<!--                <el-row>-->
<!--                    <el-col :span="10">-->
<!--                        <el-form-item label="血液ID" prop="bloodId" >-->
<!--                            <el-input v-model="bloodInformation.bloodId" readonly  style="width:180px; float: right;"></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                    <el-col :span="10">-->
<!--                        <el-form-item label="血装编号条码" prop="barcode" >-->
<!--                            <el-input v-model="bloodInformation.barcode" readonly  style="width:180px; float: right;"></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                </el-row>-->
<!--                <el-row>-->
<!--                    <el-col :span="10">-->
<!--                        <el-form-item label="ABO血型" prop="aboInfo" >-->
<!--                            <el-input v-model="bloodInformation.aboInfo" readonly  style="width:180px; float: right;"></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                    <el-col :span="10">-->
<!--                        <el-form-item label="RH血型" prop="rhInfo" >-->
<!--                            <el-input v-model="bloodInformation.rhInfo" readonly  style="width:180px; float: right;"></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                </el-row>-->
<!--                <el-row>-->
<!--                    <el-col :span="10">-->
<!--                        <el-form-item label="拓展码" prop="extendCode" >-->
<!--                            <el-input v-model="bloodInformation.extendCode" readonly  style="width:180px; float: right;"></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                    <el-col :span="10">-->
<!--                        <el-form-item label="血液成份" prop="bloodComponent" >-->
<!--                            <el-input v-model="bloodInformation.bloodComponent" readonly  style="width:180px; float: right;"></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                </el-row>-->
<!--                <el-row>-->
<!--                    <el-col :span="10">-->
<!--                        <el-form-item label="规格" prop="bloodCount" >-->
<!--                            <el-input v-model="bloodInformation.bloodCount" readonly  style="width:180px; float: right;"></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                    <el-col :span="10">-->
<!--                        <el-form-item label="血液来源" prop="bloodSource" >-->
<!--                            <el-input v-model="bloodInformation.bloodSource" readonly  style="width:180px; float: right;"></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                </el-row>-->
<!--                <el-row>-->
<!--                    <el-col :span="10">-->
<!--                        <el-form-item label="采集时间" prop="collectTime" >-->
<!--                            <el-input v-model="bloodInformation.collectTime" readonly  style="width:180px; float: right;"></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                    <el-col :span="10">-->
<!--                        <el-form-item label="失效时间" prop="failureTime" >-->
<!--                            <el-input v-model="bloodInformation.failureTime" readonly  style="width:180px; float: right;"></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                </el-row>-->
<!--                <el-row>-->
<!--                    <el-col :span="10">-->
<!--                        <el-form-item label="状态" prop="stateInfo" >-->
<!--                            <el-input v-model="bloodInformation.stateInfo" readonly  style="width:180px; float: right;"></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                    <el-col :span="10">-->
<!--                        <el-form-item label="入库金额" prop="inboundAmount" >-->
<!--                            <el-input v-model="bloodInformation.inboundAmount" readonly  style="width:180px; float: right;"></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                </el-row>-->
<!--                <el-row>-->
<!--                    <el-col :span="10">-->
<!--                        <el-form-item label="血袋位置" prop="bloodLocation" >-->
<!--                            <el-input v-model="bloodInformation.bloodLocation" readonly  style="width:180px; float: right;"></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                    <el-col :span="10">-->
<!--                        <el-form-item label="血液金额" prop="bloodAmount" >-->
<!--                            <el-input v-model="bloodInformation.bloodAmount" readonly  style="width:180px; float: right;"></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                </el-row>-->
<!--                <el-row>-->
<!--                    <el-col :span="10">-->
<!--                        <el-form-item label="出库时间" prop="outboundTime" >-->
<!--                            <el-input v-model="selectBlood.outboundTime" readonly  style="width:180px; float: right;"></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                    <el-col :span="10">-->
<!--                        <el-form-item label="出库地点" prop="outboundLocation" >-->
<!--                            <el-input v-model="selectBlood.outboundLocation" readonly  style="width:180px; float: right;"></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                </el-row>-->
<!--                <el-row>-->
<!--                    <el-col :span="10">-->
<!--                        <el-form-item label="取血人" prop="bloodTaker" >-->
<!--                            <el-input v-model="selectBlood.bloodTaker" readonly  style="width:180px; float: right;"></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                    <el-col :span="10">-->
<!--                        <el-form-item label="取血人工号" prop="bloodTakerNumber" >-->
<!--                            <el-input v-model="selectBlood.bloodTakerNumber" readonly  style="width:180px; float: right;"></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                </el-row>-->
<!--                <el-row>-->
<!--                    <el-col :span="10">-->
<!--                        <el-form-item label="操作人" prop="operator" >-->
<!--                            <el-input v-model="selectBlood.operator" readonly  style="width:180px; float: right;"></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                    <el-col :span="10">-->
<!--                        <el-form-item label="操作人工号" prop="operatorNumber" >-->
<!--                            <el-input v-model="selectBlood.operatorNumber" readonly  style="width:180px; float: right;"></el-input>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                </el-row>-->
<!--            </el-form>-->
<!--        </el-dialog>-->
        <el-dialog title="血液信息" center :visible.sync="bloodVisible" width="800px" @close="cancelViewBlood">
            <!-- 内容的主体区域 -->
            <el-descriptions   :content-style="rowCenter" :label-style="rowCenter" class="margin-top"  :column="2"  :size="size" border>
                <el-descriptions-item>
                    <template slot="label" align="center" >
                        血液ID
                    </template>
                    {{ bloodInformation.bloodId }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label" align="center" >
                        血装编号条码
                    </template>
                    {{ bloodInformation.barcode }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label" align="center" >
                        ABO血型
                    </template>
                    {{ bloodInformation.aboInfo }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label" align="center" >
                        RH血型
                    </template>
                    {{ bloodInformation.rhInfo }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label" align="center" >
                        拓展码
                    </template>
                    {{ bloodInformation.extendCode }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label" align="center" >
                        血液成份
                    </template>
                    {{ bloodInformation.bloodComponent }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label" align="center" >
                        规格
                    </template>
                    {{ bloodInformation.bloodCount }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label" align="center" >
                        血液来源
                    </template>
                    {{ bloodInformation.bloodSource }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label" align="center" >
                        采集时间
                    </template>
                    {{ bloodInformation.collectTime }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label" align="center" >
                        失效时间
                    </template>
                    {{ bloodInformation.failureTime }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label" align="center" >
                        状态
                    </template>
                    {{ bloodInformation.stateInfo }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label" align="center" >
                        入库金额
                    </template>
                    {{ bloodInformation.inboundAmount }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label" align="center" >
                        血袋位置
                    </template>
                    {{ bloodInformation.bloodLocation }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label" align="center" >
                        血液金额
                    </template>
                    {{ bloodInformation.bloodAmount }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label" align="center" >
                        出库时间
                    </template>
                    {{ selectBlood.outboundTime }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label" align="center" >
                        出库地点
                    </template>
                    {{ selectBlood.outboundLocation }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label" align="center" >
                        取血人
                    </template>
                    {{ selectBlood.bloodTaker }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label" align="center" >
                        取血人工号
                    </template>
                    {{ selectBlood.bloodTakerNumber }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label" align="center" >
                        操作人
                    </template>
                    {{ selectBlood.operator }}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label" align="center" >
                        操作人工号
                    </template>
                    {{ selectBlood.operatorNumber }}
                </el-descriptions-item>
            </el-descriptions>

        </el-dialog>

        <!--血液出库信息展示-->
        <el-table :data="bloodOutBoundInformation" style="width: 100%" border
                  :header-cell-style="{'text-align': 'center','background': '#eef1f6'}" highlight-current-row
                  @current-change="" id="out-table">
            <el-table-column type="selection" width="55" align="center"></el-table-column>

            <el-table-column prop="outboundNumber" label="出库单据号" min-width="10%" align="center">
            </el-table-column>

            <el-table-column prop="outboundReason" label="出库原因" min-width="10%" align="center">
            </el-table-column>

            <el-table-column label="出库日期" min-width="20%" align="center">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{scope.row.outboundTime}}</span>
                </template>
            </el-table-column>

            <el-table-column prop="outboundLocation" label="出库地址" min-width="10%" align="center">
            </el-table-column>

            <el-table-column prop="bloodTaker" label="取血人" min-width="10%" align="center">
            </el-table-column>

            <el-table-column prop="operator" label="操作人" min-width="10%" align="center">
            </el-table-column>

            <el-table-column label="操作" min-width="10%" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="getBloodInformation(scope.$index, scope.row)">查看</el-button>
<!--                    <el-button size="mini" type="primary" @click="reviewInBound(scope.$index, scope.row)">复核</el-button>-->
                </template>
            </el-table-column>
        </el-table>

<!--        <el-pagination :page-size="pageSize" :total="total" :current-page.sync="current" layout="prev, pager, next, jumper"-->
<!--                       class="pagination"  @current-change="handleCurrentChange" style="text-align: center; margin-top: 20px;" />-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="current"
                :page-sizes="[1, 5, 10, 20]"
                :page-size.sync="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                class="pagination"
                style="text-align: center; margin-top: 20px;">
        </el-pagination>
    </template>
</div>

<script src="/plugins/vue-2.5.17/vue.js"></script>
<script src="/plugins/element-2.4.5/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.12/lib/index.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/element-ui@2.15.12/lib/theme-chalk/index.min.css" rel="stylesheet">
<script src="/icons/iconfont.js"></script>
<script src="/js/axios.min.js"></script>
<script>Vue.prototype.$ELEMENT = { size: 'medium' };</script>
<script language="JavaScript" type="text/javascript">
    //Date原型上添加格式转换方法
    Date.prototype.format = function(fmt) {
        const o = {
            "M+": this.getMonth() + 1,                 //月份 
            "d+": this.getDate(),                    //日 
            "h+": this.getHours(),                   //小时 
            "m+": this.getMinutes(),                 //分 
            "s+": this.getSeconds(),                 //秒 
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
            "S": this.getMilliseconds()             //毫秒 
        };
        if(/(y+)/.test(fmt)) {
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
        }
        for(const k in o) {
            if(new RegExp("("+ k +")").test(fmt)){
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
            }
        }
        return fmt;
    }
</script>
<script>
    (function () {
        const vm = window.vm = new Vue({
            el: '.data-manage-table',
            data() {
                return {
                    rowCenter:{
                        "text-align":"center"
                    },
                    size:'',
                    
                    total: 0,   //总记录数
                    current: 1,     //当前页
                    pageSize: 5,      //每页记录数
                    pages: 0,       //总页数

                    labelPosition: 'right',
                    bloodVisible: false,    //查看血液信息

                    //ABO血型
                    aboBloodType : [
                        {
                            label: 'A',
                            value: 'A'
                        },
                        {
                            label: 'O',
                            value: 'O'
                        },
                        {
                            label: 'B',
                            value: 'B'
                        },
                        {
                            label: 'AB',
                            value: 'AB'
                        },
                        {
                            label: '待定',
                            value: '待定'
                        },
                    ],

                    rhBloodType: [
                        {
                            label: '+',
                            value: '+'
                        },
                        {
                            label: '-',
                            value: '-'
                        },
                    ],

                    //血液状态选择
                    state: [
                        {
                            label: '入库',
                            value: '入库'
                        },
                        {
                            label: '在库',
                            value: '在库'
                        },
                        {
                            label: '已出库',
                            value: '已出库'
                        },
                        {
                            label: '已分配',
                            value: '已分配'
                        },
                        {
                            label: '废弃申请',
                            value: '废弃申请'
                        },
                        {
                            label: '患者退血中',
                            value: '患者退血中'
                        },
                        {
                            label: '血库退血中',
                            value: '血库退血中'
                        },
                        {
                            label: '取消入库',
                            value: '取消入库'
                        },
                        {
                            label: '血站退血中',
                            value: '血站退血中'
                        },
                        {
                            label: '配血',
                            value: '配血'
                        },
                        {
                            label: '待抽取血',
                            value: '待抽取血'
                        },
                        {
                            label: '已抽取血',
                            value: '已抽取血'
                        },
                        {
                            label: '血液加工',
                            value: '血液加工'
                        },
                    ],

                    //血液位置
                    bloodLocation: [
                        {
                            label: '血站',
                            value: '血站'
                        },
                        {
                            label: '血库',
                            value: '血库'
                        },
                    ],

                    //血液来源选择
                    bloodSource: [
                        {
                            label: '血站',
                            value: '血站'
                        },
                        {
                            label: '医院',
                            value: '医院'
                        }
                    ],

                    //搜索出库信息条件
                    searchOutBoundInformation: {
                        outboundNumber: '',     //出库单据号
                        outboundReason: '',    //出库原因
                        outboundLocation: '',       //出库地址
                        operator: '',   //操作人姓名
                        dateVal: [],    //出库时间
                        bloodTaker: '',    //取血人
                        bloodTakerNumber: '',   //取血人工号
                        operator: '',   //操作人
                        operatorNumber: '', //操作人工号
                       
                    },

                    //查询到的血液出库信息
                    bloodOutBoundInformation: [],
                    
                    //选择的血液
                    selectBlood: {},

                    //查看血液信息
                    bloodInformation: {},

                }
            },

            computed: {

            },

            watch: {
            },

            methods: {
                //每页记录个数变化
                handleSizeChange(val) {
                    this.current = 1
                    this.pageSize = val
                    this.searchInBound()
                },
                
                //点击页码
                handleCurrentChange: function (val) {
                    this.searchOutBound()
                },

                handleSizeChange(val) {
                    this.current = 1
                    this.pageSize = val
                    this.searchOutBound()
                },

                //根据查询条件查询入库信息
                searchOutBound() {
                    //出库单据号
                    let outboundNumber = this.searchOutBoundInformation.outboundNumber
                    //出库原因
                    let outboundReason = this.searchOutBoundInformation.outboundReason
                    //出库地址
                    let outboundLocation = this.searchOutBoundInformation.outboundLocation
                    //血液来源
                    let bloodSource = this.searchOutBoundInformation.bloodSource
                    //操作人姓名
                    let operator = this.searchOutBoundInformation.operator
                    //操作人工号
                    let operatorNumber = this.searchOutBoundInformation.operatorNumber
                    //取血人
                    let bloodTaker = this.searchOutBoundInformation.bloodTaker
                    //取血人工号
                    let bloodTakerNumber = this.searchOutBoundInformation.bloodTakerNumber
                    //日期范围
                    let dateVal = this.searchOutBoundInformation.dateVal
                    //日期格式转换
                    for (let i = 0; i < dateVal.length; i++) {
                        if(dateVal[i] instanceof Date)
                            dateVal[i] = dateVal[i].format("yyyy-MM-dd")
                    }
                    let startTime = dateVal[0]
                    let endTime = dateVal[1]

                    axios({
                        url: '/bloodOutBound/normal/searchBloodOutBound',
                        method: 'get',
                        params: {
                            outboundNumber: outboundNumber,
                            outboundReason: outboundReason,
                            outboundLocation: outboundLocation,
                            bloodSource: bloodSource,
                            operator: operator,
                            operatorNumber: operatorNumber,
                            bloodTaker: bloodTaker,
                            bloodTakerNumber: bloodTakerNumber,
                            startTime: startTime != null ? startTime : '',
                            endTime: endTime != null ? endTime : '',
                            currentPage: this.current,
                            pageSize: this.pageSize
                        },
                    }).then(res => {
                        if (res.data.code == 200) {
                            this.bloodOutBoundInformation = res.data.data;
                            for (let i = 0; i < this.bloodOutBoundInformation.length; i++) {
                                this.bloodOutBoundInformation[i].bloodInformation = JSON.parse( this.bloodOutBoundInformation[i].bloodInformation)
                            }
                            this.total = res.data.total;
                            this.pages = res.data.pages;
                        } else {
                            this.$notify({
                                tile: '警告',
                                message: '搜索出错',
                                type: 'warning'
                            })
                        }
                    }).catch(err => {
                        this.$notify.error({
                            title: '错误',
                            message: '搜索失败',
                        })
                    })

                },

                //清空搜索条件
                emptySearch() {
                    for (const key in this.searchOutBoundInformation)
                        this.searchOutBoundInformation[key] = ""
                },

                //查看血液信息
                getBloodInformation(index, row) {
                    this.selectBlood = row
                    this.bloodInformation = row.bloodInformation
                    this.bloodVisible = true
                },

                //新增血液信息检查
                verifyAddBlood(newSample){

                },
                
                //取消查看血液信息
                cancelViewBlood(){
                    this.bloodVisible = false
                    // for (const key in this.bloodInformation)
                    //     this.bloodInformation[key] = ""
                },
                
                //导出excel
                exportExcel () {
                    //出库单据号
                    let outboundNumber = this.searchOutBoundInformation.outboundNumber
                    //出库原因
                    let outboundReason = this.searchOutBoundInformation.outboundReason
                    //出库地址
                    let outboundLocation = this.searchOutBoundInformation.outboundLocation
                    //血液来源
                    let bloodSource = this.searchOutBoundInformation.bloodSource
                    //操作人姓名
                    let operator = this.searchOutBoundInformation.operator
                    //操作人工号
                    let operatorNumber = this.searchOutBoundInformation.operatorNumber
                    //取血人
                    let bloodTaker = this.searchOutBoundInformation.bloodTaker
                    //取血人工号
                    let bloodTakerNumber = this.searchOutBoundInformation.bloodTakerNumber
                    //日期范围
                    let dateVal = this.searchOutBoundInformation.dateVal

                    //日期格式转换
                    if (dateVal.length > 0) {
                        //日期格式转换
                        if(dateVal[0] instanceof Date)
                            dateVal[0] = dateVal[0].format("yyyy-MM-dd")
                        if(dateVal[1] instanceof Date)
                            dateVal[1] = dateVal[1].format("yyyy-MM-dd")
                    }
                    let startTime = dateVal[0] != null ? dateVal[0] : ''
                    let endTime = dateVal[1] != null ? dateVal[1] : ''
                    //创建a标签元素
                    const a = document.createElement('a')
                    a.href = 'http://localhost:8080/bloodOutBound/normal/downloadExcel?' + 'outboundNumber=' + outboundNumber + '&outboundReason=' + outboundReason + '&outboundLocation=' + outboundLocation + '&operator=' + operator + '&operatorNumber=' + operatorNumber + '&bloodTaker=' + bloodTaker + '&bloodTakerNumber=' + bloodTakerNumber + '&startTime=' + startTime +  '&endTime=' + endTime
                    a.click()
                }
            },

            mounted() {
                this.searchOutBound()
                // var oBtn1 = document.getElementById("aaa");
                // oBtn1.style.border = "2px solid red"
                // oBtn1.style.color = "red"
            }
        });


    })()
</script>

</body>

</html>